import React from 'react'
import ReactDOM from 'react-dom'

//  使用纯组件时（他内置了shouldComponentUpdate这个方法），会导致，传递引用类型的数据时，修改里面的值不重新渲染的情况


class App extends React.PureComponent {

    state = {
        obj: {
            number: 0
        }
    }

    handleClick = () => {

        // 正确的做法,我们创建了一个新的对象
        const newObj = {...this.state.obj,number:Math.floor(Math.random()*3)}
        this.setState(()=>{
            return {
                obj:newObj
            }
        })


        // 错误的演示方案：直接修改原始对象中属性的值
        // const newObj = this.state.obj
        // newObj.number = Math.floor(Math.random() * 3)
        // this.setState(() => {   
        //     return {
        //         obj: newObj
        //     }
        // })
    }

    render() {
        return (
            <div>
                <h1>计数器：{this.state.obj.number}</h1>
                <button onClick={this.handleClick}>更新数据</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

